<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>播放器</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/display.css"/>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .img img {
      display: block;
      height: 100%;
      width: 100%;
    }

    .img {
      overflow: hidden;
      width: 16%;
      height: 170px;
      margin-right: 20px
    }

    .paging_list li {
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0;
      border-bottom: dashed #ccc 1px;
      cursor: pointer;
    }

    .paging_container {
      overflow: auto;
      width: 100%;
    }

    .paging_container h1 {
      font-size: 18px;
      font-weight: 500;
      color: #262626;
    }

    .paging_container .time {
      font-size: 12px;
    }

    .paging_container .box {
      padding: 3px;
      width: 70%;
    }

    .paging_container .text {
      font-size: 14px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      color: #5e5e5e;
    }

    .num.el-radio-button {
      width: 50px;
      margin-bottom: 5px;
      text-align: center;
      color: #000;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-row>
      <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
        <el-row>
          <el-col :xs="8" :sm="4" :md="4" :lg="3" :xl="4">
            <el-select placeholder="请选择解析线路" size="small" v-model="line" @change="play('')">
              <el-option v-for="(item,index) in lines" :key="index" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :xs="13" :sm="14" :md="10" :lg="15" :xl="14">
            <el-input @keyup.enter.native="SearchVideo" v-model="keyWord" placeholder="输入搜索关键字" size="small" class="hidden-sm-and-down"></el-input>
            <el-input @keyup.enter.native="play()" placeholder="粘贴视频播放页链接地址" v-model="videoSrc" size="small" class="hidden-sm-and-up"></el-input>
          </el-col>
          <el-col :xs="3" :sm="6" :md="10" :lg="6" :xl="6">
            <el-button-group>
              <el-button @click="SearchVideo" type="primary" size="small" class="hidden-sm-and-down">搜索</el-button>
              <el-button @click="playdrawer=true" type="primary" size="small" class="hidden-sm-and-down">输入播放地址</el-button>
              <el-button @click="drawer=true" type="primary" size="small" class="hidden-sm-and-down">显示列表</el-button>
              <el-button @click="play()" type="primary" size="small" class="hidden-sm-and-up">解析播放</el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <el-drawer :with-Header="false" title="视频搜索" :visible.sync="drawer" direction="rtl">
          <el-tabs type="border-card" v-model="activeTab" tab-position="top" style="height:100%">
            <el-tab-pane label="芒果TV" name="mgtv">
              <div class="paging_container">
                <ul class="paging_list">
                  <li class="paging_box" style="display: flex;" v-for="(d,i) in mglist" :key="i">
                    <div class="img"><img :src="d.data.pic"></div>
                    <div class="box">
                      <h1 v-html="d.data.hitTitle"></h1>
                      <div class="text">
                        <template v-if="d.data.sourceList[0].videoList">
                          <template v-for="(list,index) in d.data.sourceList[0].videoList">
                            <el-radio-group size="mini" @change="play('https://'+list.url.slice(2))">
                              <el-radio-button class="num" :label="list.title" :name="d.data.sourceList[0].vid">
                              </el-radio-button>
                            </el-radio-group>
                          </template>



                          <!-- <el-tag class="num" size="medium" v-for="(list,index) in d.data.sourceList[0].videoList"
                            :key="index" @click="play(list.url.slice(2))">
                            {{list.title}}
                          </el-tag> -->
                        </template>
                        <template v-else>
                          <el-tag size="medium" @click="play(d.data.sourceList[0].url.slice(2))">
                            立即播放
                          </el-tag>
                        </template>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-result icon="warning" title="暂无搜索结果" subTitle="你可以换个关键字再次搜索" v-if="mglist.length<1">
                </el-result>
              </div>
            </el-tab-pane>
            <el-tab-pane label="腾讯" name="qq">
              <div class="paging_container">
                <ul class="paging_list" v-if="qqlist.length>0">
                  <li class="paging_box" style="display: flex;">
                    <div class="img"><img src="d.data.pic"></div>
                    <div class="box">
                      <h1><b>标题</b></h1>
                      <div class="text">
                        <el-tag class="num" v-for='(item,i) in qqlist' :key="i" @click="play(item.url)" size="medium">
                          {{item.name}}
                        </el-tag>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-result icon="warning" title="暂无搜索结果" subTitle="你可以换个关键字再次搜索" v-if="qqlist.length<1">
                </el-result>
              </div>
            </el-tab-pane>
            <el-tab-pane label="优酷" name="youku">
              优酷
            </el-tab-pane>
            <el-tab-pane label="爱奇艺" name="iqiyi">
              爱奇艺
            </el-tab-pane>
          </el-tabs>
        </el-drawer>
        <el-drawer :with-Header="false" title="视频播放" :visible.sync="playdrawer" direction="btt">
          <el-row :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form label-width="100px" size="small">
              <el-form-item label="解析线路">
                <el-select v-model="line" placeholder="请选择解析线路" style="width:80%">
                  <el-option v-for="(item,index) in lines" :key="index" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="播放地址">
                <el-input placeholder="粘贴视频播放页链接地址" v-model="videoSrc" style="width:80%"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button @click="play()" type="primary" size="small" style="width:80%">Go——开始解析播放</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-drawer>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <iframe width="100%" :height="height" :src="playSrc" allowfullscreen="allowfullscreen" allowtransparency="true" scrolling="no" allowfullscreen=""
          frameborder=0></iframe>
      </el-col>
    </el-row>
  </div>
</body>

</html>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        height: document.documentElement.clientHeight - 40,
        lines: [
          {
            value: 'https://jx.renrenmi.cc/?url=',
            name: '全网线路解析'
          }, {
            value: 'https://z1.m1907.top/?jx=',
            name: '腾爱优乐芒果搜'
          }, {
            value: 'https://vip.parwix.com:4433/player/?url=',
            name: '爱奇艺 优酷(第一源)'
          },
          // {
          //   value: 'http://jx.13tv.top/?url=',
          //   name: '大亨解析接口'
          // }, 
          {
            value: 'https://chaxun.truechat365.com/?url=',
            name: '线路1'
          }, {
            value: 'https://jx.xmflv.com/?url=',
            name: '虾米'
          },
          {
            value: 'https://jsap.attakids.com/?url=',
            name: '线路3'
          }
        ],
        playSrc: 'https://z1.m1907.top/?jx=',
        line: 'https://vip.parwix.com:4433/player/?url=',
        videoSrc: '',
        keyWord: '',
        drawer: false,
        playdrawer: false,
        activeTab: 'mgtv',
        qqlist: [],
        mglist: []
      }
    },
    methods: {
      play(url) {
        if (url || url == '') {
          this.videoSrc = url
        } else {
          if (this.videoSrc == '') {
            this.$message('请复制视频地址并粘贴');
          }
        }
        this.playSrc = this.line + this.videoSrc
      },
      SearchVideo() {
        if (this.keyWord != '') {
          this.playSrc = this.playSrc + this.keyWord;
          //this.SearchQQ()
          this.SearchMG()
          this.activeTab = 'mgtv'
        } else {
          this.$message('请输入搜索关键字');
        }
      }, SearchQQ() {
        axios({
          method: 'post',
          url: 'https://v.qq.com/x/search/qq/?q=' + this.keyWord, //请求的链接地址
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'text/plain',
          },
          params: {},
        })
          .then((resp) => {
            this.drawer = true
            this.qqlist = []
            const $ = cheerio.load(resp.data)
            var html = $('.result_episode_list .item')
            for (var num = 0; num <= html.length; num++) {
              var url = $(html[num]).children('a').attr('href');
              if (url.indexOf('http') != -1) {
                // var n=$(html[num]).children('a').html();
                this.qqlist.push({ 'url': url, 'name': $(html[num]).children('a').html() });
              }

            }
            //如果成功将在这里进行后续的逻辑操作
          })
          .catch((err) => {
            //如果请求失败将在这里进行后续的逻辑操作
            console.log(err)
          })
      },
      SearchMG() {
        var _this = this;
        _this.mglist = []
        axios({
          method: 'get',
          url: `https://mobileso.bz.mgtv.com/pc/search/v1?q=${_this.keyWord}&callback=jsonp_${new Date().getTime()}_${parseInt(Math.random() * 100000)}`
        }).then((res) => {
          var resdata = this.jsonpToJson(res.data);
          //data为集合 
          resdata.data.contents.forEach(function (item) {
            if (item.type == 'serial' || item.type == 'movie') {
              _this.mglist.push(item)
            }
          })
          
            if(_this.mglist.length>0){
                _this.drawer = true
            }
        });
       
      },
      jsonpToJson(datas) {
        let jsonData = null
        // 下面是对获取到的数据进行处理，把jsonp格式的数据处理成json格式的数据
        if (typeof datas === 'string') {
          // 返回的是jsonp类型的数据，所以要用正则表达式来匹配截取json数据
          const reg = /^\w+\((\{[^()]+\})\)$/
          const matches = datas.match(reg)
          // matches匹配到的是数组，数组第一个是所有正则表达式匹配的字符串，第二个是第一个小括号匹配到的字符串
          if (matches) {
            jsonData = JSON.parse(matches[1])
          } else {
            jsonData = JSON.parse(datas.substring(datas.indexOf("(") + 1, datas.lastIndexOf(")")))
          }
        }
        return jsonData
      }

    },
    mounted() {
      // 实时获取浏览器宽度高度
      let that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          window.fullWidth = document.documentElement.clientWidth
          that.height = window.fullHeight - 40 // 高
          // that.windowWidth = window.fullWidth // 宽
        })()
      }
    }
  })

</script>